<template>
	<div>
		<div class="menu  ">
			<div class="contents flex flex-col-center">
				<div class="flex-1">
					桃李教育
				</div>
				<div class="flex flex-2 flex-row-between" style="color: #fff;height: 20px;width: 100px;text-align: center;">
					<div v-for="(item,index) in nav" :key="index" @click="select(item)" style="cursor: pointer;">
						<div>{{item.txt}}</div>
						<div :class="activeIndex==item.url?'change':''" ></div>
					</div>
				</div>
				<div class="flex-1 " style="text-align: right;">
					用户
				</div>
			</div>
		</div>
		
		
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '/index',
				nav:[{
					txt:"首页",
					url:'/index'
				},{
					txt:"课程导航",
					url:'/course'
				},{
					txt:"生涯规划",
					url:'/future'
				},{
					txt:"个人中心",
					url:'/personal'
				}]
			}
		},
		methods: {
			select(item) {
				this.activeIndex=item.url;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu{
		background: #1480F9;
		padding: 25px;
		
	}
	
	.change{
		background: #fff;
		width:30px;
		height: 4px;
		border-radius: 20px;
		margin: 5px auto 0 auto;
		transition: all 0.3s; 
	}
	
</style>
